<!DOCTYPE html>
<html lang="zh">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>待办事项</title>
  <style>
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

    body {
      font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
      background-color: #f5f7fa;
      color: #333;
      padding: 20px;
    }

    .container {
      max-width: 800px;
      margin: 0 auto;
      background: white;
      border-radius: 12px;
      box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
      overflow: hidden;
    }

    header {
      text-align: center;
      padding: 30px 20px;
      background: #fff;
    }

    h1 {
      color: #5d3fd3;
      font-size: 2.5rem;
      margin-bottom: 10px;
    }

    .subtitle {
      color: #666;
      font-size: 1rem;
    }

    .input-group {
      display: flex;
      padding: 20px;
      gap: 10px;
    }

    .input-group input[type="text"] {
      flex: 1;
      padding: 12px 16px;
      border: 1px solid #ddd;
      border-radius: 8px;
      font-size: 1rem;
      outline: none;
      transition: border-color 0.3s ease;
    }

    .input-group input[type="text"]:focus {
      border-color: #5d3fd3;
    }

    .input-group button {
      padding: 12px 20px;
      background-color: #5d3fd3;
      color: white;
      border: none;
      border-radius: 8px;
      cursor: pointer;
      font-size: 1rem;
      transition: background-color 0.3s ease;
    }

    .input-group button:hover {
      background-color: #4a2ebe;
    }

    .filters {
      display: flex;
      justify-content: start;
      gap: 10px;
      padding: 0 20px 10px;
    }

    .filter-btn {
      padding: 6px 12px;
      border: 1px solid #ccc;
      background: #f9f9f9;
      border-radius: 20px;
      cursor: pointer;
      font-size: 0.9rem;
      transition: all 0.3s ease;
    }

    .filter-btn.active {
      background-color: #5d3fd3;
      color: white;
      border-color: #5d3fd3;
    }

    .tasks-list {
      list-style: none;
      padding: 0;
      margin: 0;
      max-height: 400px;
      overflow-y: auto;
    }

    .task-item {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 16px 20px;
      background: #f9f9f9;
      border-bottom: 1px solid #eee;
      transition: background-color 0.3s ease, transform 0.2s ease;
      animation: fadeInUp 0.5s forwards;
    }

    .task-item.completed {
      opacity: 0.7;
      text-decoration: line-through;
    }

    .task-item.completed .checkbox {
      background-color: #5d3fd3;
      color: white;
    }

    .task-item:hover {
      background-color: #f0f0f0;
      transform: translateY(-2px);
    }

    .checkbox {
      width: 20px;
      height: 20px;
      border: 1px solid #ccc;
      border-radius: 4px;
      display: flex;
      justify-content: center;
      align-items: center;
      cursor: pointer;
      transition: all 0.3s ease;
    }

    .checkbox.checked::after {
      content: "✓";
      color: white;
      font-weight: bold;
    }

    .task-text {
      flex: 1;
      margin-left: 10px;
      font-size: 1rem;
    }

    .delete-btn {
      background: none;
      border: none;
      color: #999;
      cursor: pointer;
      font-size: 1.2rem;
      transition: color 0.3s ease;
    }

    .delete-btn:hover {
      color: #e74c3c;
    }

    .footer {
      text-align: center;
      padding: 20px;
      background: #f9f9f9;
      font-size: 0.9rem;
      color: #666;
    }

    @keyframes fadeInUp {
      from {
        opacity: 0;
        transform: translateY(20px);
      }
      to {
        opacity: 1;
        transform: translateY(0);
      }
    }

    /* 响应式设计 */
    @media (max-width: 600px) {
      h1 {
        font-size: 2rem;
      }
      .input-group {
        flex-direction: column;
      }
      .input-group button {
        width: 100%;
        margin-top: 10px;
      }
      .filters {
        flex-wrap: wrap;
      }
      .filter-btn {
        flex: 1;
        min-width: 80px;
      }
      .task-item {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
      }
      .checkbox {
        margin-right: 0;
        margin-bottom: 8px;
      }
    }
  </style>
</head>
<body>
  <div class="container">
    <header>
      <h1>待办事项</h1>
      <p class="subtitle">简单高效地管理你的任务</p>
    </header>

    <div class="input-group">
      <input type="text" id="taskInput" placeholder="添加新的待办事项..." />
      <button id="addBtn">+ 添加</button>
    </div>

    <div class="filters">
      <button class="filter-btn active" data-filter="all">全部</button>
      <button class="filter-btn" data-filter="active">未完成</button>
      <button class="filter-btn" data-filter="completed">已完成</button>
    </div>

    <ul class="tasks-list" id="tasksList"></ul>

    <div class="footer" id="stats">0 个未完成，0 个总计</div>
  </div>

  <script>
    // 待办事项类
    class TodoItem {
      constructor(text) {
        this.id = Date.now() + Math.random();
        this.text = text;
        this.completed = false;
        this.createdAt = new Date().toISOString();
      }

      toggleComplete() {
        this.completed = !this.completed;
      }

      delete() {
        return { id: this.id };
      }

      toJSON() {
        return {
          id: this.id,
          text: this.text,
          completed: this.completed,
          createdAt: this.createdAt
        };
      }

      static fromJSON(obj) {
        const item = new TodoItem(obj.text);
        item.id = obj.id;
        item.completed = obj.completed;
        item.createdAt = obj.createdAt;
        return item;
      }
    }

    // 主程序逻辑
    class TodoApp {
      constructor() {
        this.todos = [];
        this.currentFilter = 'all';
        this.$input = document.getElementById('taskInput');
        this.$addBtn = document.getElementById('addBtn');
        this.$tasksList = document.getElementById('tasksList');
        this.$stats = document.getElementById('stats');
        this.$filters = document.querySelectorAll('.filter-btn');

        this.init();
      }

      init() {
        // 加载本地存储
        this.loadFromStorage();

        // 绑定事件
        this.$input.addEventListener('keypress', (e) => {
          if (e.key === 'Enter') this.addTodo();
        });

        this.$addBtn.addEventListener('click', () => this.addTodo());

        this.$filters.forEach(btn => {
          btn.addEventListener('click', () => {
            this.currentFilter = btn.dataset.filter;
            this.$filters.forEach(b => b.classList.remove('active'));
            btn.classList.add('active');
            this.render();
          });
        });

        // 渲染初始数据
        this.render();
      }

      addTodo() {
        const text = this.$input.value.trim();
        if (!text) return;

        const todo = new TodoItem(text);
        this.todos.push(todo);
        this.saveToStorage();
        this.$input.value = '';
        this.render();
      }

      toggleComplete(id) {
        const todo = this.todos.find(t => t.id === id);
        if (todo) {
          todo.toggleComplete();
          this.saveToStorage();
          this.render();
        }
      }

      deleteTodo(id) {
        this.todos = this.todos.filter(t => t.id !== id);
        this.saveToStorage();
        this.render();
      }

      render() {
        // 清空列表
        this.$tasksList.innerHTML = '';

        // 过滤任务
        let filteredTodos = this.todos;
        if (this.currentFilter === 'active') {
          filteredTodos = this.todos.filter(t => !t.completed);
        } else if (this.currentFilter === 'completed') {
          filteredTodos = this.todos.filter(t => t.completed);
        }

        // 渲染每个任务项
        filteredTodos.forEach(todo => {
          const li = document.createElement('li');
          li.className = `task-item ${todo.completed ? 'completed' : ''}`;
          li.innerHTML = `
            <div class="checkbox" data-id="${todo.id}"></div>
            <span class="task-text">${todo.text}</span>
            <button class="delete-btn" data-id="${todo.id}">🗑</button>
          `;
          this.$tasksList.appendChild(li);

          // 绑定事件
          li.querySelector('.checkbox').addEventListener('click', () => {
            this.toggleComplete(todo.id);
          });

          li.querySelector('.delete-btn').addEventListener('click', () => {
            this.deleteTodo(todo.id);
          });
        });

        // 更新统计信息
        const activeCount = this.todos.filter(t => !t.completed).length;
        const totalCount = this.todos.length;
        this.$stats.textContent = `${activeCount} 个未完成，${totalCount} 个总计`;
      }

      saveToStorage() {
        localStorage.setItem('todos', JSON.stringify(this.todos.map(t => t.toJSON())));
      }

      loadFromStorage() {
        const saved = localStorage.getItem('todos');
        if (saved) {
          this.todos = JSON.parse(saved).map(obj => TodoItem.fromJSON(obj));
        }
      }
    }

    // 启动应用
    window.onload = () => {
      new TodoApp();
    };
  </script>
</body>
</html>